<script setup lang="ts">
import { watch, ref, onUnmounted, inject, reactive } from "vue";
import { TableItem } from "@/views/all/equip/inspect/types";
import InspectRulesTable from "@/views/all/equip/inspect/plan/components/InspectRulesTable.vue";
import { flattenDataByKeys } from "@visual/utils";
import { eventBus } from "@/views/all/visual/template/utils/eventBus";

const positionCode = inject("positionCode", ref(""));
const facCode = inject("facCode", ref(""));

import { eqpTagTable } from "@/api/visual/visualConfig";
const isShow = defineModel("isShow");
const groupCode = defineModel("groupCode");
const state = reactive({
  mainData: [] as any,
  allTableData: [] as any,
  dialogTableData: [] as any,
  dialogShow: false
});
const tableColums = ref<TableItem[]>([
  {
    prop: "index",
    label: "序号",
    minWidth: "50"
  },
  { prop: "detectorName", label: "侦测器名称", minWidth: "170" },
  {
    prop: "gas",
    label: "气体类型",
    minWidth: "100"
  },
  {
    prop: "brand",
    label: "品牌",
    minWidth: "100"
  },
  {
    prop: "position",
    label: "位置",
    minWidth: "100"
  },
  {
    prop: "range",
    label: "量程",
    minWidth: "100"
  },
  {
    prop: "scheduledAlarmSetting",
    label: "预定报警设定",
    minWidth: "130"
  },
  {
    prop: "oneAlarmValue",
    label: "一段报警值",
    minWidth: "110"
  },
  {
    prop: "twoAlarmValue",
    label: "二段报警值",
    minWidth: "110"
  },
  {
    prop: "value",
    label: "实际值",
    minWidth: "90"
    // customFun: row => {
    //   return row?.value || "-";
    // }
  },
  {
    prop: "isolation",
    label: "隔离",
    minWidth: "90"
    // customFun: row => {
    //   return row?.value || "-";
    // }
  },
  {
    prop: "online",
    label: "上线",
    minWidth: "90"
    // customFun: row => {
    //   return row?.value || "-";
    // }
  }
]);
const queryParams = ref({ pageNum: 1, pageSize: 20 });
const flatData = ref({});
watch(
  () => isShow.value,
  async newVal => {
    if (newVal) {
      await queryTable();
      queryParams.value = { pageNum: 1, pageSize: 20 };
      queryDialogTable(queryParams.value);
      state.dialogShow = true;
      // eventBus.on("wsUpdata", wsUpdata);
    } else {
      dialogClosed();
    }
  }
);
// function wsUpdata(wsdata) {
//   for (let key in wsdata) {
//     if (flatData.value) {
//       if (flatData.value[key]) {
//         flatData.value[key].value = wsdata[key];
//       }
//     }
//   }
// }
function dialogClosed() {
  state.dialogTableData = [];
  isShow.value = false;
  state.dialogShow = false;
  groupCode.value = "";
  eventBus.off("wsUpdata");
}
function queryDialogTable(data: any) {
  const start = data.pageSize * (data.pageNum - 1);
  const end = data.pageSize * (data.pageNum - 1) + data.pageSize;
  state.dialogTableData = state.allTableData.slice(start, end);
}
async function queryTable() {
  const params = {
    facCode: facCode.value,
    positionCode: positionCode.value
  };
  state.allTableData = await eqpTagTable(params);
  // flatData.value = flattenDataByKeys(state.allTableData, "tagNum");
  state.mainData = state.allTableData.slice(0, 10);
}
</script>
<template>
  <px-dialog
    v-model="state.dialogShow"
    title="侦测器列表"
    width="1200px"
    style="min-height: 580px"
    destroy-on-close
    align-center
    :append-to-body="true"
    @closed="dialogClosed"
  >
    <div class="subject-tree-content">
      <InspectRulesTable
        :query-params="queryParams"
        :table-data="state.dialogTableData"
        :tableColumns="tableColums"
        :total="state.allTableData.length"
        :height="'400px'"
        class="w-[100%]"
        @query-table="queryDialogTable"
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <px-button type="primary" @click="dialogClosed">关闭</px-button>
      </div>
    </template>
  </px-dialog>
</template>
<style lang="scss" scoped>
.list-warpper {
  width: 100%;
}

:deep(.px-table) {
  &.detector-table {
    height: calc(100% - 60px);

    .detector-row {
      --px-table-tr-bg-color: #f4f6fd !important;

      background-color: #f4f6fd !important;
    }
  }
}

.detail-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 32px;
  font-size: 14px;
  font-weight: 400;
  line-height: 32px;
  color: #3b82f6;

  & > span {
    cursor: pointer;
  }
}

:deep(.px-dialog) {
  .px-dialog__footer {
    padding-top: 0;
    text-align: center;
  }
}

.dialog-footer {
  padding: 0;
  text-align: center;
}
</style>
